<template>
   
  <div class="app-container">
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>商品列表</span>
      <el-button
        size="mini"
        class="btn-add"
        @click="handleSelectProduct()"
        style="margin-left: 20px"
        >添加</el-button
      >
    </el-card>
    <el-tabs v-model="activeName"  @tab-click="handleClick">
      <el-tab-pane label="审核通过" name="first"><list :status="2" ref="liveTabs0"/></el-tab-pane>
      <!-- <el-tab-pane label="未审核" name="second"
        ><list :status="0"  ref="liveTabs1"
      /></el-tab-pane> -->
      <el-tab-pane label="审核中" name="third"  
        ><list :status="1" ref="liveTabs2"
      /></el-tab-pane>
      <el-tab-pane label="审核驳回" name="fourth"  
        ><list :status="3" ref="liveTabs3"
      /></el-tab-pane>
    </el-tabs>

    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" width="350px">
      <el-form
        :model="dialogFormVisibleData"
        :rules="rules"
        ref="dialogFormVisibleData"
      >
        <el-form-item label="商品图片:">
          <img
            style="width: 100px; height: 100px"
            :src="dialogFormVisibleData.pic"
          />
        </el-form-item>
        <el-form-item label="商品名称：" prop="name">
          <el-input type="text" v-model="dialogFormVisibleData.name"></el-input>
          <!--  :input="dialogFormVisibleDataName()" -->
        </el-form-item>
        <el-form-item label="商品价钱：">
          <el-input v-model="dialogFormVisibleData.price"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSelectDialogConfirm()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <el-dialog title="选择商品" :visible.sync="selectDialogVisible" width="50%">
      <el-input
        v-model="dialogData.listQuery.keyword"
        style="width: 250px; margin-bottom: 20px"
        size="small"
        placeholder="商品名称搜索"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSelectSearch()"
        ></el-button>
      </el-input>
      <el-table
        :data="dialogData.list"
        @selection-change="handleDialogSelectionChange"
        border
      >

        <el-table-column label="图片" align="center">
          <template slot-scope="scope"
            ><img style="width: 100px; height: 100px" :src="scope.row.pic"
          /></template>
        </el-table-column>
        <el-table-column label="商品名称" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="货号" width="160" align="center">
          <template slot-scope="scope">NO.{{ scope.row.productSn }}</template>
        </el-table-column>
        <el-table-column label="价格" width="120" align="center">
          <template slot-scope="scope">￥{{ scope.row.price }}</template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="dialogFormVisibleClick(scope.row)"
              >选择</el-button
            ></template
          >
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleDialogSizeChange"
          @current-change="handleDialogCurrentChange"
          layout="prev, pager, next"
          :current-page.sync="dialogData.listQuery.pageNum"
          :page-size="dialogData.listQuery.pageSize"
          :page-sizes="[5, 10, 15]"
          :total="dialogData.total"
        >
        </el-pagination>
      </div>
      <div style="clear: both"></div>
    </el-dialog>

  </div>
</template>
<script>
import {
  fetchList,
  createFlashProductRelation,
  deleteFlashProductRelation,
  updateFlashProductRelation,
} from "@/api/flashProductRelation";
import { addImg, addProduct, productList } from "@/api/wx";
import { fetchList as fetchProductList } from "@/api/product";
import { fetchList as fetchProductSkuList } from "@/api/skuStock";
import axios from "axios";
import list from "./list.vue";
const defaultListQuery = {
  pageNum: 1,
  pageSize: 5,
  status: 2,
  flashPromotionId: null,
  flashPromotionSessionId: null,
};

export default {
  name: "flashPromotionProductRelationList",
  components: {
    list,
  },
  data() {
    const validatePass = (rule, value, callback) => {
      console.log(value);
      if (value === "") {
        callback(new Error("请输入商品名称"));
      }
      let len = 0;
      for (var i = 0; i < this.dialogFormVisibleData.name.length; i++) {
        let c = this.dialogFormVisibleData.name.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len += 0.5;
        } else {
          len += 1;
        }
      }
      if (len < 3 || len > 13) {
        callback(
          new Error(
            "商品名称必须为3-14个汉字（一个字等于两个英文字符或特殊字符）"
          )
        );
      } else {
        callback();
      }
    };
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      dialogVisible: false,
      selectDialogVisible: false,
      dialogFormVisible: false,
      dialogFormVisibleData: {},
      dialogFormVisibleDataNameBoo: false,
      rules: {
        name: [{ validator: validatePass, trigger: "blur" }],
      },
      dialogData: {
        list: null,
        total: null,
        multipleSelection: [],
        listQuery: {
          keyword: null,
          pageNum: 1,
          pageSize: 5,
        },
      },
      editDialogVisible: false,
      flashProductRelation: {
        product: {},
      },
      activeName: "first",
    };
  },
  created() {
    this.listQuery.flashPromotionId = this.$route.query.flashPromotionId;
    this.listQuery.flashPromotionSessionId = this.$route.query.flashPromotionSessionId;
  },
  methods: {
    handleSelectProduct() {
      this.selectDialogVisible = true;
      this.getDialogList();
    },
    handleClick(tab) {
      console.log(tab.index );
      if(tab.index==0){
   this.$refs.liveTabs0.getList();
      }else if(tab.index==1){
 //this.$refs.liveTabs1.getList();
 this.$refs.liveTabs2.getList();
      } else if(tab.index==2){
 this.$refs.liveTabs3.getList();
      }else if(tab.index==3){

      }
     
      
    },
      handleDialogCurrentChange(val) {
      this.dialogData.listQuery.pageNum = val;
      this.getDialogList();
    },
    handleDialogSizeChange(val) {
      this.dialogData.listQuery.pageNum = 1;
      this.dialogData.listQuery.pageSize = val;
      this.getDialogList();
    },
    dialogFormVisibleClick(data) {
      console.log(data);
      this.dialogFormVisible = true;
      this.dialogFormVisibleData =Object.assign({},data);
    },
      handleDialogSelectionChange(val) {
      this.dialogData.multipleSelection = val;
    },
    async handleSelectDialogConfirm() {
      let len = 0;
      for (var i = 0; i < this.dialogFormVisibleData.name.length; i++) {
        let c = this.dialogFormVisibleData.name.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len += 0.5;
        } else {
          len += 1;
        }
      }
      if (len < 3 || len > 13) {
        this.$message({
          message:
            "商品名称必须为3-14个汉字（一个字等于两个英文字符或特殊字符）",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (
        this.dialogFormVisibleData.price == null ||
        this.dialogFormVisibleData.price == ""
      ) {
        this.$message({
          message: "商品价格不能为空",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      this.$confirm("使用要进行添加操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        const loading = this.$loading({
          lock: true,
          text: "Loading",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        addImg(this.dialogFormVisibleData.pic)
          .then((ser) => {
            addProduct(
              JSON.parse(ser.data).media_id,
              this.dialogFormVisibleData.name,
              this.dialogFormVisibleData.price,
              0,
              1,
              "pages/goodsDetails/goodsDetails?id=" +
                this.dialogFormVisibleData.id
            ).then((res) => {
              loading.close();
              this.dialogFormVisible=false;
              this.$message({
                message: "添加成功，正在审核中...",
                type: "success",
                duration: 1000,
              });

            });
          })
          .catch((err) => {
            loading.close();
          });
      }).catch((err) => {
            
              this.$message({
                message: "申请失败，请重新提交！",
                type: "error",
                duration: 1000,
              });
              setTimeout(() => {
                location.reload()
              }, 1000);
          });
    },
    getDialogList() {
      fetchProductList(this.dialogData.listQuery).then((response) => {
        this.dialogData.list = response.data.list;
        this.dialogData.total = response.data.total;
      });
    },
  },
  filters: {
    spData(data) {
      let name = "";
      if (data != null && data != "") {
        JSON.parse(data).map((e) => {
          name += e.key + ":" + e.value;
        });
      }

      return name;
    },
  },
};
</script>
<style scoped>
.operate-container {
  margin-top: 0;
}
.input-width {
  width: 200px;
}
</style>


